<template>
  <Teleport to="body" v-if="open" >
    <div class="modal">
      <div>
        <div class="title">{{ title }}</div>
        <div class="content">是否确认删除该用户？</div>
      </div>
      <div>
        <el-button type="primary" @click="handleOk">确定</el-button>
        <el-button type="primary" @click="handleCancel">取消</el-button>
      </div>
    </div>
  </Teleport>
</template>
<script setup lang="ts">
defineProps({
  title: {
    type: String,
    default: "提示",
  },
  open: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:open"]);

/**
 * 处理确定按钮点击事件
 */
const handleOk = () => {
  emit("update:open", true);
};

/**
 * 处理取消按钮点击事件
 */
const handleCancel = () => {
  emit("update:open", false);
};

defineOptions({
  name: "HModel",
});
</script>

<style scoped>
.modal {
  position: fixed;
  z-index: 999;
  top: 20%;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  background-color: #fff;
  opacity: 0.8;
  border: 1px solid #000;
  padding: 20px;
}
.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.content {
  font-size: 16px;
  margin-bottom: 20px;
}
</style>
